<template>
  <div class="address-box">
    <s-header :name="'地址管理'"></s-header>
    <div class="address-item">
      <van-address-list v-model="address.selectedId" :list="showAddressList" default-tag-text="默认" @add="onAdd"
        @edit="onEdit" @select="select" />
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import sHeader from '@/components/SimpleHeader.vue'
import { useRouter } from 'vue-router'
import { useUserInfoStoreHook } from "@/stores/user";
import { useAddress } from "@/stores/address";
const router = useRouter()
const { getAddressList, address, selectAddress } = useAddress()

onMounted(() => {
  init()
})

const user = useUserInfoStoreHook()
const init = async () => {
  await getAddressList()
}

const showAddressList = computed(() => {
  const list = address.addressList.map(item => ({
    id: item.id,
    name: item.name,
    tel: item.phone,
    address: `${item.province}${item.city}${item.area}${item.addr}`,
    isDefault: address.defaultId === item.id,
  }))
  return list
})

// 前往添加地址页面
const onAdd = () => {
  router.push({ path: 'address-edit', query: { type: 'add' } })
}
// 前往地址编辑页面
const onEdit = (item) => {
  router.push({ path: 'address-edit', query: { type: 'edit', addressId: item.id } })
}
// 选择某个地址后，跳回订单生成页面
const select = (item) => {
  selectAddress(item.id)
  router.back()
}
</script>

<style lang="less">
@import '../common/style/mixin';

.address-box {
  .van-radio__icon {
    display: none;
  }

  .address-item {
    .van-button {
      background: @primary;
      border-color: @primary;
    }
  }
}
</style>
